<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      /* font-size: 0; */
    }
    .container img {
      float: left;
    }
    .text {
      width: 222px;
      background-color: #000;
      color: #fff;
      text-align: center;
    }
  </style>
</head>

<body>
  <script>
    /*
      1. 图片3px问题
        - 如果img下面有元素，默认情况下图片下面会有3px间隙
        - 原因是英文字母会划分为四行，图片参照英文字母占3行，因此会空出一行
    */
  </script>
  <img src="imgs/3px.jpg" alt="">

  <div class="container">
    <img src="imgs/img_01.png" alt="">
    <div class="text">我是文字</div>
  </div>
</body>

</html>